import React from 'react'
import { Button,Card,Radio,Modal} from "antd";
import './ui.less'
// Modals 
export default class Buttons extends React.Component{
    constructor(){
        super()
        this.state={
            showModal1:false,
            showModal2:false,
            showModal3:false,
            showModal4:false
        }
    }
    modalClick=(type)=>{
        this.setState({
            // showModal1:true
            // 动态设置[参数]
            [type]:true
        })
    }
    confirmClick=(type)=>{
        //Api提供的方法
        Modal[type]({
            title:'确认?',
            content:"你确定要付款么?",
            //确定触发的事件
            onOk(){
                console.log("Ok")
            },
            //取消触发的事件
            onCancel(){
                console.log("Cancel")
            }
        })
    }
    render(){
        return (
            <div>
                <Card title="基础模态框" className="cardbox">
                    {/* 传参必须用箭头函数()=> 不然报错,箭头函数点击时候才触发,不用箭头函数一进来就触发*/}
                    <Button type="primary" onClick={()=>this.modalClick("showModal1")}>Open</Button>
                    <Button type="primary" onClick={()=>this.modalClick("showModal2")}>自定义页脚</Button>
                    <Button type="primary" onClick={()=>this.modalClick("showModal3")}>顶部20px弹出</Button>
                    <Button type="primary" onClick={()=>this.modalClick("showModal4")}>水平垂直居中</Button>
                </Card>
                <Card title="信息确认框" className="cardbox">
                    {/* 传参必须用箭头函数()=> 不然报错,箭头函数点击时候才触发,不用箭头函数一进来就触发*/}
                    <Button type="primary" onClick={()=>this.confirmClick("confirm")}>Cofirm</Button>
                    <Button type="primary" onClick={()=>this.confirmClick("info")}>Info</Button>
                    <Button type="primary" onClick={()=>this.confirmClick("success")}>Success</Button>
                    <Button type="primary" onClick={()=>this.confirmClick("warning")}>Warning</Button>
                </Card>

                {/* 模态框1 */}
                <Modal
                    //标题
                    title="标题"
                    //弹出是否可见
                    visible={this.state.showModal1} 
                    // 关闭
                    onCancel={()=>{ 
                        this.setState({
                            showModal1:false
                        })
                    }}
                >
                    <p>内容区域内容区域内容区域内容区域内容区域</p>
                </Modal>

                {/* 模态框2 */}
                <Modal
                    //标题
                    title="标题"
                    //弹出是否可见
                    visible={this.state.showModal2} 
                    okText="好的" //自定义确认键
                    cancelText="算了" //自定义取消键
                    // 关闭
                    onCancel={()=>{ 
                        this.setState({
                            showModal2:false
                        })
                    }}
                >
                    <p>内容区域内容区域内容区域内容区域内容区域</p>
                </Modal>

                {/* 模态框3 */}
                <Modal
                    //标题
                    title="标题"
                    //弹出是否可见
                    visible={this.state.showModal3} 
                    style={{top:"20px"}}
                    // 关闭
                    onCancel={()=>{ 
                        this.setState({
                            showModal3:false
                        })
                    }}
                >
                    <p>内容区域内容区域内容区域内容区域内容区域</p>
                </Modal>

                {/* 模态框4 */}
                <Modal
                    //标题
                    title="标题"
                    //弹出是否可见
                    visible={this.state.showModal4} 
                    //设置最外层class名字,样式先不写了
                    wrapClassName=""
                    // 关闭
                    onCancel={()=>{ 
                        this.setState({
                            showModal4:false
                        })
                    }}
                >
                    <p>内容区域内容区域内容区域内容区域内容区域</p>
                </Modal>
            </div>
        )
    }
}